<script setup lang="ts">
import {
  businessDetailsApi,
  memberFeeBillPageApi,
  memberFeeConfigListApi,
  giveMemberFeeApi,
  changeRightsApi
} from '@/api/merchantManagement'
import { ElImage } from 'element-plus'
import {
  CompanyTypeDict,
  BusinessStateDict,
  LicenseValidityTypeDict,
  LegalCertValidityTypeDict,
  CardTypeDict,
  FinancialTypeDict
} from '@/utils/dict'
import { useI18n } from '@/hooks/web/useI18n'
import { ElMessage } from 'element-plus'
import { hasPermission as hasPermis } from '@/components/Permission/src/utils'
import { MemberComboTypeDict, dictToList } from '@/utils/dict'

const { t } = useI18n()
const props = defineProps({
  detailObj: {
    type: Object,
    default: () => {}
  }
})

const detail = ref<any>({})
const memberType = ref(1)

const getDetail = async () => {
  const res = await businessDetailsApi(props.detailObj.id)
  detail.value = res.data
  activeCount.value = res.data.activeCount
  maxInviteAgentCount.value = !res.data.maxInviteAgentCount ? null : res.data.maxInviteAgentCount
  singleActiveMerchantCount.value = !res.data.singleActiveMerchantCount
    ? null
    : res.data.singleActiveMerchantCount
}
getDetail()
const activities = ref<any>([])
const recordPageNum = ref(1)
const isRecordFinish = ref(false)
const getMemberFeeBill = async () => {
  const res = await memberFeeBillPageApi({
    businessId: props.detailObj.id,
    pageNum: recordPageNum.value,
    pageSize: 100
  })
  activities.value =
    recordPageNum.value === 1 ? res.data.list : [...activities.value, ...res.data.list]
  activities.value.reverse()
  isRecordFinish.value = activities.value.length === res.data.total
}
getMemberFeeBill()

const memberFeeConfigList = ref<any>([])
// const vipListPageNum = ref(1)
// const isVipFinish = ref(false)
const getMemberFeeConfigList = async () => {
  if (!hasPermis('GET /business/memberFeeBillPage')) {
    return false
  }
  const res = await memberFeeConfigListApi({
    memberType: memberType.value,
    showState: 1,
    pageNum: 1,
    pageSize: 999
  })
  radio.value = ''
  memberFeeConfigList.value = res.data.list
  // isVipFinish.value = memberFeeConfigList.value.length === res.data.total
}
getMemberFeeConfigList()
// const activities = [
//   {
//     content: 'Event start',
//     timestamp: '2018-04-15'
//   },
//   {
//     content: 'Approved',
//     timestamp: '2018-04-13'
//   },
//   {
//     content: 'Success',
//     timestamp: '2018-04-11'
//   }
// ]
const dialogVisible = ref(false)
const dialogVisible1 = ref(false)
const saveLoading = ref(false)
const saveLoading1 = ref(false)
const radio = ref()
const activeCount = ref()
const maxInviteAgentCount = ref()
const singleActiveMerchantCount = ref()
const save = async () => {
  if (!radio.value) {
    ElMessage.error(t('请选择赠送的会员类型'))
    return
  }
  saveLoading.value = true
  // const write = unref(writeRef)
  const res = await giveMemberFeeApi({
    businessId: props.detailObj.id,
    memberFeeConfigId: radio.value
  })
  saveLoading.value = false
  if (!res) {
    return
  }
  if (res.code === 200) {
    ElMessage.success('赠送的会员成功')
  } else {
    ElMessage.error(res.message)
  }
  dialogVisible.value = false
  radio.value = ''
  recordPageNum.value = 1
  getMemberFeeBill()
}
const save1 = async () => {
  if (!activeCount.value) {
    ElMessage.error(t('请输入发布次数'))
    return
  }
  saveLoading1.value = true
  const res = await changeRightsApi({
    businessId: props.detailObj.id,
    activeCount: activeCount.value,
    maxInviteAgentCount: maxInviteAgentCount.value || null,
    singleActiveMerchantCount: singleActiveMerchantCount.value || null
  })
  saveLoading1.value = false
  if (!res) {
    return
  }
  if (res.code === 200) {
    ElMessage.success('修改成功')
  } else {
    ElMessage.error(res.message)
  }
  getDetail()
  dialogVisible1.value = false
}
const loadRecord = () => {
  console.log('触底')
  if (!isRecordFinish.value) {
    ++recordPageNum.value
    getMemberFeeBill()
  }
}
// const loadVip = () => {
//   if (!isVipFinish.value) {
//     ++vipListPageNum.value
//     getMemberFeeConfigList()
//   }
// }
const showDialog = () => {
  radio.value = ''
  dialogVisible.value = false
}
const showDialog1 = () => {
  dialogVisible1.value = false
}
const currentIndex = ref(-1)
const changeRadio = (e) => {
  currentIndex.value = memberFeeConfigList.value.findIndex((item) => item.id === e)
}
</script>

<template>
  <div>
    <div class="flex">
      <img class="w-15 h-15 mr-4" :src="detail.logo" alt="" />
      <div class="flex flex-col justify-around">
        <div class="flex items-center">
          <div class="font-bold">
            {{ detail.businessName }}
          </div>
          <template v-if="detail.memberExpireTime">
            <img
              v-if="new Date(detail.memberExpireTime).getTime() < new Date().getTime()"
              class="w-15 ml-4"
              src="@/assets/imgs/vip.png"
            />
            <img v-else class="w-15 ml-4" src="@/assets/imgs/vip-active.png" alt="" />
          </template>
        </div>
        <div class="text-14px">ID：{{ detail.businessNo }}</div>
      </div>
    </div>
    <div class="flex text-14px py-2">
      <div class="flex flex-[50%] px-2">
        <span>结算类型：</span>
        <span>{{ FinancialTypeDict[detail.financialAccountType] }}</span>
      </div>
    </div>
    <div class="flex text-14px py-2">
      <div class="flex flex-[50%] px-2">
        <span>类型：</span>
        <span>{{ CompanyTypeDict[detail.companyType] }}</span>
      </div>
      <div class="flex flex-[50%] px-2">
        <span>状态：</span>
        <span>{{ BusinessStateDict[detail.state] }}</span>
      </div>
    </div>
    <div class="flex text-14px py-2">
      <div class="flex flex-[50%] px-2">
        <span>入驻时间：</span>
        <span>{{ detail.createTime }}</span>
      </div>
      <div class="flex flex-[50%] px-2">
        <span>会员有效期至：</span>
        <span>{{ detail.memberExpireTime ? detail.memberExpireTime : '未开通' }}</span>
      </div>
    </div>
    <div class="flex text-14px">
      <div class="flex flex-[50%] px-2"></div>
      <div class="flex flex-[50%] px-2">
        <div
          v-hasPermi="'GET POST /business/giveMemberFee'"
          style="color: #409eff; cursor: pointer"
          @click="dialogVisible = true"
          >赠送会员
        </div>
        <div class="ml-5" style="color: #409eff; cursor: pointer" @click="dialogVisible1 = true"
          >修改权益
        </div>
      </div>
    </div>
  </div>
  <div>
    <div class="font-bold py-2">经营信息</div>
    <div class="flex text-14px py-2">
      <div class="flex flex-[50%] px-2">
        <span>商家简称：</span>
        <span>{{ detail.businessShortName }}</span>
      </div>
      <div class="flex flex-[50%] px-2">
        <div>商家logo：</div>
        <ElImage
          v-if="detail.logo"
          :src="detail.logo"
          fit="cover"
          class="w-15"
          lazy
          :preview-src-list="[detail.logo]"
          preview-teleported
        />
      </div>
    </div>
    <div class="flex text-14px py-2">
      <div class="flex flex-[50%] px-2">
        <span>公司类型：</span>
        <span>{{ CompanyTypeDict[detail.companyType] }}</span>
      </div>
      <div class="flex flex-[50%] px-2"></div>
    </div>
    <div class="flex text-14px py-2">
      <div class="flex flex-[50%] px-2">
        <span>所属行业：</span>
        <span>{{ detail.mccName }}</span>
      </div>
      <div class="flex flex-[50%] px-2">
        <span>成立时间：</span>
        <span>{{ detail.businessEnterApplyPageVo?.foundDate }}</span>
      </div>
    </div>
    <div class="flex text-14px py-2">
      <div class="flex flex-[50%] px-2">
        <span>注册资本：</span>
        <span>{{ detail.businessEnterApplyPageVo?.regCapital }}</span>
      </div>
      <div class="flex flex-[50%] px-2">
        <span>经营范围：</span>
        <span>{{ detail.businessEnterApplyPageVo?.businessScope }}</span>
      </div>
    </div>
    <div class="flex text-14px py-2">
      <div class="flex flex-[50%] px-2">
        <span>营业执照编号：</span>
        <span>{{ detail.businessEnterApplyPageVo?.licenseCode }}</span>
      </div>
      <div class="flex flex-[50%] px-2">
        <span>营业执照有效期：</span>
        <span>{{
          LicenseValidityTypeDict[detail.businessEnterApplyPageVo?.licenseValidityType]
        }}</span>
      </div>
    </div>
    <div class="flex text-14px py-2">
      <div class="flex flex-[50%] px-2">
        <span>营业执照有效期开始日期：</span>
        <span>{{ detail.businessEnterApplyPageVo?.licenseBeginDate }}</span>
      </div>
      <div class="flex flex-[50%] px-2">
        <span>营业执照有效期截止日期：</span>
        <span>{{ detail.businessEnterApplyPageVo?.licenseEndDate }}</span>
      </div>
    </div>
    <div class="flex text-14px py-2">
      <div class="flex flex-[50%] px-2">
        <div>营业执照图片：</div>
        <ElImage
          v-if="detail.businessEnterApplyPageVo?.licensePicUrl"
          :src="detail.businessEnterApplyPageVo?.licensePicUrl"
          fit="cover"
          class="w-15"
          lazy
          :preview-src-list="[detail.businessEnterApplyPageVo?.licensePicUrl]"
          preview-teleported
        />
      </div>
      <div class="flex flex-[50%] px-2">
        <span>客服电话：</span>
        <span>{{ detail.businessEnterApplyPageVo?.customerMobile }}</span>
      </div>
    </div>
    <div class="flex text-14px py-2">
      <div class="flex flex-[50%] px-2">
        <span>注册地址：</span>
        <span>
          {{ detail.businessEnterApplyPageVo?.regProvinceName }}
          {{ detail.businessEnterApplyPageVo?.regCityName }}
          {{ detail.businessEnterApplyPageVo?.regCountyName }}
        </span>
      </div>
      <div class="flex flex-[50%] px-2">
        <span>注册详细地址：</span>
        <span>{{ detail.businessEnterApplyPageVo?.regAddress }}</span>
      </div>
    </div>
    <div class="flex text-14px py-2">
      <div class="flex flex-[50%] px-2">
        <span>经营地址：</span>
        <span>
          {{ detail.businessEnterApplyPageVo?.businessProvinceName }}
          {{ detail.businessEnterApplyPageVo?.businessCityName }}
          {{ detail.businessEnterApplyPageVo?.businessCountyName }}
        </span>
      </div>
      <div class="flex flex-[50%] px-2">
        <span>经营详细地址：</span>
        <span>{{ detail.businessEnterApplyPageVo?.businessAddress }}</span>
      </div>
    </div>
    <div class="flex text-14px py-2">
      <div class="flex flex-[50%] px-2">
        <div>线下经营-门头照：</div>
        <ElImage
          v-if="detail.businessEnterApplyPageVo?.storeHeaderPicUrl"
          :src="detail.businessEnterApplyPageVo?.storeHeaderPicUrl"
          fit="cover"
          class="w-15"
          lazy
          :preview-src-list="[detail.businessEnterApplyPageVo?.storeHeaderPicUrl]"
          preview-teleported
        />
      </div>
      <div class="flex flex-[50%] px-2">
        <div>线下经营-内景照：</div>
        <ElImage
          v-if="detail.businessEnterApplyPageVo?.storeIndoorPicUrl"
          :src="detail.businessEnterApplyPageVo?.storeIndoorPicUrl"
          fit="cover"
          class="w-15"
          lazy
          :preview-src-list="[detail.businessEnterApplyPageVo?.storeIndoorPicUrl]"
          preview-teleported
        />
      </div>
    </div>
    <div class="flex text-14px py-2">
      <div class="flex flex-[50%] px-2">
        <div>线下经营-收银台：</div>
        <ElImage
          v-if="detail.businessEnterApplyPageVo?.storeCashierDeskPicUrl"
          :src="detail.businessEnterApplyPageVo?.storeCashierDeskPicUrl"
          fit="cover"
          class="w-15"
          lazy
          :preview-src-list="[detail.businessEnterApplyPageVo?.storeCashierDeskPicUrl]"
          preview-teleported
        />
      </div>
      <div class="flex-[50%] px-2"></div>
    </div>
  </div>
  <div>
    <div class="font-bold py-2">法人/联系人信息</div>
    <div class="flex text-14px py-2">
      <div class="flex flex-[50%] px-2">
        <span>法人姓名：</span>
        <span>{{ detail.businessEnterApplyPageVo?.legalName }}</span>
      </div>
      <div class="flex flex-[50%] px-2">
        <span>法人证件类型：</span>
        <span>{{ detail.businessEnterApplyPageVo?.legalCertType }}</span>
      </div>
    </div>
    <div class="flex text-14px py-2">
      <div class="flex flex-[50%] px-2">
        <span>法人证件号：</span>
        <span>{{ detail.businessEnterApplyPageVo?.legalCertNo }}</span>
      </div>
      <div class="flex flex-[50%] px-2">
        <span>法人证件有效期：</span>
        <span>
          {{ LegalCertValidityTypeDict[detail.businessEnterApplyPageVo?.legalCertValidityType] }}
        </span>
      </div>
    </div>
    <div class="flex text-14px py-2">
      <div class="flex flex-[50%] px-2">
        <span>法人证件有效期开始日期：</span>
        <span>{{ detail.businessEnterApplyPageVo?.legalCertBeginDate }}</span>
      </div>
      <div class="flex flex-[50%] px-2">
        <span>法人证件有效期截止日期：</span>
        <span>{{ detail.businessEnterApplyPageVo?.legalCertEndDate }}</span>
      </div>
    </div>
    <div class="flex text-14px py-2">
      <div class="flex flex-[50%] px-2">
        <span>法人手机号：</span>
        <span>{{ detail.businessEnterApplyPageVo?.legalMobileNo }}</span>
      </div>
      <div class="flex flex-[50%] px-2">
        <span>法人身份证地址：</span>
        <span>{{ detail.businessEnterApplyPageVo?.legalAddr }}</span>
      </div>
    </div>
    <div class="flex text-14px py-2">
      <div class="flex flex-[50%] px-2">
        <div>法人身份证人像面：</div>
        <ElImage
          v-if="detail.businessEnterApplyPageVo?.legalCertFrontPicUrl"
          :src="detail.businessEnterApplyPageVo?.legalCertFrontPicUrl"
          fit="cover"
          class="w-15"
          lazy
          :preview-src-list="[detail.businessEnterApplyPageVo?.legalCertFrontPicUrl]"
          preview-teleported
        />
      </div>
      <div class="flex flex-[50%] px-2">
        <div>法人身份证国徽面：</div>
        <ElImage
          v-if="detail.businessEnterApplyPageVo?.legalCertBackPicUrl"
          :src="detail.businessEnterApplyPageVo?.legalCertBackPicUrl"
          fit="cover"
          class="w-15"
          lazy
          :preview-src-list="[detail.businessEnterApplyPageVo?.legalCertBackPicUrl]"
          preview-teleported
        />
      </div>
    </div>
    <div class="flex text-14px py-2">
      <div class="flex flex-[50%] px-2">
        <span>联系人姓名：</span>
        <span>{{ detail.businessEnterApplyPageVo?.contactName }}</span>
      </div>
      <div class="flex flex-[50%] px-2">
        <span>联系人手机号：</span>
        <span>{{ detail.businessEnterApplyPageVo?.contactMobileNo }}</span>
      </div>
    </div>
    <div class="flex text-14px py-2">
      <div class="flex flex-[50%] px-2">
        <span>联系人邮箱：</span>
        <span>{{ detail.businessEnterApplyPageVo?.contactEmail }}</span>
      </div>
      <div class="flex flex-[50%] px-2">
        <span>联系人身份证：</span>
        <span>{{ detail.businessEnterApplyPageVo?.contactCertNo }}</span>
      </div>
    </div>
    <div class="flex text-14px py-2">
      <div class="flex flex-[50%] px-2">
        <span>系统管理员：</span>
        <span>{{ detail.businessEnterApplyPageVo?.mobile }}</span>
      </div>
    </div>
  </div>
  <div>
    <div class="font-bold py-2">结算信息</div>
    <div class="flex text-14px py-2">
      <div class="flex flex-[50%] px-2">
        <span>账户类型：</span>
        <span>{{ CardTypeDict[detail.businessEnterApplyPageVo?.cardType] }}</span>
      </div>
      <div v-if="detail.businessEnterApplyPageVo?.cardType === 0" class="flex flex-[50%] px-2">
        <div>开户许可证：</div>
        <ElImage
          v-if="detail.businessEnterApplyPageVo?.regAcctPicUrl"
          :src="detail.businessEnterApplyPageVo?.regAcctPicUrl"
          fit="cover"
          class="w-15"
          lazy
          :preview-src-list="[detail.businessEnterApplyPageVo?.regAcctPicUrl]"
          preview-teleported
        />
      </div>
      <div
        v-if="
          detail.businessEnterApplyPageVo?.cardType === 1 ||
          detail.businessEnterApplyPageVo?.cardType === 2
        "
        class="flex flex-[50%] px-2"
      >
        <span>账户名称：</span>
        <span>{{ detail.businessEnterApplyPageVo?.cardName }}</span>
      </div>
    </div>
    <div v-if="detail.businessEnterApplyPageVo?.cardType === 0" class="flex text-14px py-2">
      <div class="flex flex-[50%] px-2">
        <span>开户许可证核准号：</span>
        <span>{{ detail.businessEnterApplyPageVo?.openLicenceNo }}</span>
      </div>
      <div class="flex flex-[50%] px-2">
        <span>账户名称：</span>
        <span>{{ detail.businessEnterApplyPageVo?.cardName }}</span>
      </div>
    </div>
    <div class="flex text-14px py-2">
      <div class="flex flex-[50%] px-2">
        <span>银行账号：</span>
        <span>{{ detail.businessEnterApplyPageVo?.cardNo }}</span>
      </div>
      <div class="flex flex-[50%] px-2">
        <span>开户银行：{{ detail.businessEnterApplyPageVo?.bankName }}</span>
        <span></span>
      </div>
    </div>
    <div class="flex text-14px py-2">
      <div class="flex flex-[50%] px-2">
        <span>银行卡所在地：</span>
        <span>
          {{ detail.businessEnterApplyPageVo?.bankProvinceName }}
          {{ detail.businessEnterApplyPageVo?.bankCityName }}
          {{ detail.businessEnterApplyPageVo?.bankCountyName }}
        </span>
      </div>
      <div class="flex flex-[50%] px-2">
        <span>银行编码：</span>
        <span>{{ detail.businessEnterApplyPageVo?.bankCode }}</span>
      </div>
    </div>
    <div
      v-if="
        detail.businessEnterApplyPageVo?.cardType === 1 ||
        detail.businessEnterApplyPageVo?.cardType === 2
      "
      class="flex text-14px py-2"
    >
      <div class="flex flex-[50%] px-2">
        <span>支行联行号：</span>
        <span>{{ detail.businessEnterApplyPageVo?.branchCode }}</span>
      </div>
      <div class="flex flex-[50%] px-2"></div>
    </div>
    <template
      v-if="
        detail.businessEnterApplyPageVo?.cardType === 1 ||
        detail.businessEnterApplyPageVo?.cardType === 2
      "
    >
      <div class="flex text-14px py-2">
        <div class="flex flex-[50%] px-2">
          <span>持卡人证件类型：</span>
          <span>{{ detail.businessEnterApplyPageVo?.certType }}</span>
        </div>
        <div class="flex flex-[50%] px-2">
          <span>持卡人证件号码：{{ detail.businessEnterApplyPageVo?.certNo }}</span>
          <span></span>
        </div>
      </div>
      <div class="flex text-14px py-2">
        <div class="flex flex-[50%] px-2">
          <span>持卡人证件有效期：</span>
          <span>{{
            LegalCertValidityTypeDict[detail.businessEnterApplyPageVo?.certValidityType]
          }}</span>
        </div>
        <div class="flex flex-[50%] px-2">
          <span>持卡人证件有效期开始日期：</span>
          <span>{{ detail.businessEnterApplyPageVo?.certBeginDate }}</span>
        </div>
      </div>
      <div class="flex text-14px py-2">
        <div class="flex flex-[50%] px-2">
          <span>持卡人证件有效期截止日期：</span>
          <span>{{ detail.businessEnterApplyPageVo?.certEndDate }}</span>
        </div>
        <div class="flex flex-[50%] px-2">
          <span>银行卡正面：</span>
          <ElImage
            v-if="detail.businessEnterApplyPageVo?.settleCardFrontPicUrl"
            :src="detail.businessEnterApplyPageVo?.settleCardFrontPicUrl"
            fit="cover"
            class="w-15"
            lazy
            :preview-src-list="[detail.businessEnterApplyPageVo?.settleCardFrontPicUrl]"
            preview-teleported
          />
        </div>
      </div>
      <div class="flex text-14px py-2">
        <div class="flex flex-[50%] px-2">
          <span>持卡人身份证人像面：</span>
          <ElImage
            v-if="detail.businessEnterApplyPageVo?.settleCertFrontPicUrl"
            :src="detail.businessEnterApplyPageVo?.settleCertFrontPicUrl"
            fit="cover"
            class="w-15"
            lazy
            :preview-src-list="[detail.businessEnterApplyPageVo?.settleCertFrontPicUrl]"
            preview-teleported
          />
        </div>
        <div class="flex flex-[50%] px-2">
          <span>持卡人身份证国徽面：</span>
          <ElImage
            v-if="detail.businessEnterApplyPageVo?.settleCertBackPicUrl"
            :src="detail.businessEnterApplyPageVo?.settleCertBackPicUrl"
            fit="cover"
            class="w-15"
            lazy
            :preview-src-list="[detail.businessEnterApplyPageVo?.settleCertBackPicUrl]"
            preview-teleported
          />
        </div>
      </div>
      <div class="flex text-14px py-2">
        <div class="flex flex-[50%] px-2">
          <span>银行卡绑定手机号：</span>
          <span>{{ detail.businessEnterApplyPageVo?.mp }}</span>
        </div>
        <div class="flex flex-[50%] px-2"></div>
      </div>
    </template>
  </div>
  <div class="mb-20">
    <div class="font-bold py-2">系统管理员信息</div>
    <div class="flex text-14px py-2">
      <div class="flex flex-[50%] px-2">
        <span>系统管理员手机号：</span>
        <span>{{ detail.mobile }}</span>
      </div>
      <div class="flex flex-[50%] px-2"></div>
    </div>
  </div>
  <div v-hasPermi="'GET /business/memberFeeBillPage'" v-if="activities.length > 0">
    <div class="font-bold py-2">会员费续费记录</div>
    <div v-infinite-scroll="loadRecord" infinite-scroll-distance="100">
      <el-timeline>
        <el-timeline-item
          v-for="(activity, index) in activities"
          :key="index"
          :timestamp="activity.payTime"
          type="primary"
          :hollow="true"
        >
          {{ activity.memberName }} ￥{{ activity.memberFee }}
        </el-timeline-item>
      </el-timeline>
    </div>
  </div>
  <Dialog v-model="dialogVisible" title="赠送会员" :maxHeight="200" width="500" @close="showDialog">
    <div class="flex text-16px flex-col scroll-box">
      <!-- <div class="mb-3">
        <span>请选择赠送的会员类型</span>
        <span style="color: #e63434">（赠送后无法取消，请谨慎操作）</span>
      </div> -->
      <div class="mb-3 flex items-center">
        <span>会员类型：</span>
        <el-select
          v-model="memberType"
          placeholder="请选择会员类型"
          style="width: 240px"
          @change="getMemberFeeConfigList"
        >
          <el-option
            v-for="item in dictToList(MemberComboTypeDict)"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
      </div>
      <div>
        <el-radio-group v-model="radio" @change="changeRadio">
          <el-radio
            :key="index"
            v-for="(item, index) in memberFeeConfigList"
            :label="item.id"
            class="mb-3"
            >{{ item.memberName }}
          </el-radio>
        </el-radio-group>
      </div>
      <div v-if="currentIndex !== -1 && radio" class="text-orange-300">
        <span>¥{{ memberFeeConfigList[currentIndex].memberFee }}，</span>
        <span>
          {{
            !memberFeeConfigList[currentIndex].maxInviteAgentCount
              ? '不限经纪人'
              : '经纪人上限' + memberFeeConfigList[currentIndex].maxInviteAgentCount + '人'
          }}、
        </span>
        <span>
          {{
            !memberFeeConfigList[currentIndex].singleActiveMerchantCount
              ? '不限商户'
              : '限制商户' + memberFeeConfigList[currentIndex].singleActiveMerchantCount + '家'
          }}、
        </span>
        发布{{ memberFeeConfigList[currentIndex].activeCount }}次，
        {{ memberFeeConfigList[currentIndex].validMonth }}个月
      </div>
    </div>
    <template #footer>
      <ElButton type="primary" :loading="saveLoading" @click="save">
        {{ t('exampleDemo.save') }}
      </ElButton>
      <ElButton @click="showDialog">{{ t('dialogDemo.close') }}</ElButton>
    </template>
  </Dialog>
  <Dialog
    v-model="dialogVisible1"
    title="修改权益"
    :maxHeight="200"
    width="500"
    @close="showDialog1"
  >
    <div class="flex text-16px flex-col scroll-box">
      <div class="mb-3 flex items-center">
        <span>发布次数：</span>
        <el-input
          v-model="activeCount"
          style="width: 240px"
          type="number"
          placeholder="请输入发布次数"
        >
          <template #append>次</template>
        </el-input>
      </div>
      <div class="mb-3 flex items-center">
        <span>经纪人数：</span>
        <el-input
          v-model="maxInviteAgentCount"
          style="width: 240px"
          type="number"
          placeholder="不限制"
        >
          <template #append>人</template>
        </el-input>
      </div>
      <div class="mb-3 flex items-center">
        <span>单活动商户数：</span>
        <el-input
          v-model="singleActiveMerchantCount"
          style="width: 240px"
          type="number"
          placeholder="不限制"
        >
          <template #append>家</template>
        </el-input>
      </div>
    </div>
    <template #footer>
      <ElButton type="primary" :loading="saveLoading1" @click="save1">
        {{ t('exampleDemo.save') }}
      </ElButton>
      <ElButton @click="showDialog1">{{ t('dialogDemo.close') }}</ElButton>
    </template>
  </Dialog>
</template>
